<template>
	<el-container>
		<el-aside width="240px" v-loading="menuloading">
			<el-container>
				<el-header>
					<div class="">
						<el-radio-group v-model="split" @change="changeSplit">
							<el-radio-button v-for="(item,index) in spList" :key="index"
								:label="item.value">{{item.name}}</el-radio-button>
						</el-radio-group>
					</div>
				</el-header>
				<el-header>
					<div>
						<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>

					</div>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="menuList" :props="menuProps"
						highlight-current :expand-on-click-node="false" check-strictly :load="loadNode" lazy
						:filter-node-method="groupFilterNode" @node-click="menuClick" @node-drop="nodeDrop">
						<template #default="{node, data}">
							<div class="custom-tree-node">
								<div v-if="node.level == 1" class="u-flex u-col-center">
									<el-icon>
										<el-icon-officeBuilding />
									</el-icon>
									<span>{{ data.title }} </span>
								</div>
								<div v-else-if="data.nodeType == 'region'" class="u-flex u-col-center">
									<el-icon>
										<el-icon-officeBuilding />
									</el-icon>
									<span>{{ data.title }} </span>
								</div>
								<div v-else-if="data.nodeType == 'store'" class="u-flex u-col-center">
									<el-icon>
										<el-icon-shop />
									</el-icon>
									<span>{{ data.title }} </span>
								</div>
								<div v-else-if="data.nodeType == 'channel'" class="u-flex u-col-center">
									<el-icon v-if="data.online == true">
										<Camera />
									</el-icon>
									<el-icon v-if="data.online == false">
										<NoCamera />
									</el-icon>
									<span>{{ data.title }} </span>
								</div>
								<div v-else>{{ data.title }}</div>
								<!-- {{node.level}} -->
							</div>
						</template>
					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-main class="nopadding" ref="main">
				<el-row :gutter="0">
					<el-col :lg="24">
						<el-row :gutter="0">
							<el-col :span="splitSt" v-for="(item,index) in videoList.slice(0,split)" :key="index"
								style="margin-top: 0px;border:0.5px solid #eee;position: relative;" :class="split > 1 && index=== videoIndex?'jxx-video-box-active':''" @click="videoIndex = index">
								<div v-if="item.liveUrl" class="jxx-video-box">
									<scLive v-if="item.liveUrl" :src="item.liveUrl" :isLive="true" :autoplay="true"
										:openAudio="item.openAudio" ref="video" :id="'live'+index"></scLive>
									<div v-if="item.liveUrl" class="jxx-live-close" @click.stop="onCloseVideo(item)">
										<el-icon :size="30" color="#fff"><el-icon-circle-close /></el-icon>
									</div>
									<div v-if="item.liveUrl" class="jxx-tool u-font-13">
										<div class="jxx-tool-box u-flex u-col-center u-row-between u-while">
											<div class="jxx-item">
												{{item.title}}
											</div>
											<div class="u-flex u-col-center u-font-20">
												<el-dropdown>
													<div class="jxx-item u-m-l-20 u-while">
														<span
															v-if="!videoInfo.streamType || videoInfo.streamType == 'SECONDARY_STREAM_1'">标清</span>
														<span v-if="videoInfo.streamType == 'PRIMARY_STREAM'">高清</span>
													</div>
													<template #dropdown>
														<el-dropdown-menu>
															<el-dropdown-item @click="onDefinition('SECONDARY_STREAM_1')">
																标清
															</el-dropdown-item>
															<el-dropdown-item @click="onDefinition('PRIMARY_STREAM')">
																高清
															</el-dropdown-item>
														</el-dropdown-menu>
													</template>
												</el-dropdown>
												<div class="jxx-item u-m-l-20" @click="onControlPTZ(index)">
													<el-tooltip content="云台" placement="bottom" effect="light">
														<el-icon color="#fff">
															<el-icon-MostlyCloudy />
														</el-icon>
													</el-tooltip>
												</div>
												<div class="jxx-item u-m-l-20" @click="onControlPalyback(index)">
													<el-tooltip content="回放" placement="bottom" effect="light">
														<el-icon color="#fff">
															<el-icon-RefreshLeft />
														</el-icon>
													</el-tooltip>
												</div>
												<div class="jxx-item u-m-l-20">
													<el-tooltip content="声音" placement="bottom" effect="light">
														<el-icon v-if="item.volume" color="#fff"
															@click="onVolume(index,0)">
															<el-icon-Microphone />
														</el-icon>
														<el-icon v-else color="#fff" @click="onVolume(index,1)">
															<el-icon-Mute />
														</el-icon>
													</el-tooltip>
												</div>
												<div class="jxx-item u-m-l-20" @click="onFull(index)">
													<el-tooltip content="全屏" placement="bottom" effect="light">
														<el-icon color="#fff">
															<el-icon-FullScreen />
														</el-icon>
													</el-tooltip>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div v-if="!item.liveUrl" class="noVideo">
									<div class="noVideoBox">
										<noVideo />
									</div>
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
	<PTZDialog v-if="dialog.PTZ" ref="PTZDialog" @closed="dialog.permission=false"></PTZDialog>
	<palybackDialog v-if="dialog.palyback" ref="palybackDialog" @closed="dialog.palyback=false"></palybackDialog>
	<evaluateDialog v-if="dialog.evaluate" ref="evaluateDialog" @closed="dialog.evaluate=false"></evaluateDialog>
</template>

<script>
	import scLive from '@/components/scVideo/live'
	import {
		noVideo,
		Camera,
		NoCamera
	} from '@/assets/icons'
	import PTZDialog from './PTZ'
	import palybackDialog from './Palyback'
	import evaluateDialog from './evaluate'
	export default {
		name: 'scvideo',
		components: {
			scLive,
			PTZDialog,
			noVideo,
			Camera,
			NoCamera,
			palybackDialog,
			evaluateDialog
		},
		data() {
			return {
				dialog: {
					PTZ: false,
					palyback: false,
					evaluate: false
				},
				menuList: [],
				menuProps: {
					label: (data) => {
						return data.title
					}
				},
				searchData: {
					nodeType: '',
					id: ''
				},
				menuFilterText: "",
				split: 1,
				videoIndex: 0, // 当前视频插入位置
				spList: [{
						name: 1,
						value: 1,
					},
					{
						name: 4,
						value: 4,
					},
					{
						name: 9,
						value: 9,
					},
					{
						name: 16,
						value: 16,
					},
					{
						name: 36,
						value: 36,
					}
				],
				videoList: [{}],
				playUrl: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4",
				options: {
					poster: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg",
					pip: true
				},
				liveUrl: "http://123.60.223.219:7083/live/live.m3u8?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhbSI6IkhPTE8iLCJjIjowLCJjaGFubmVsX2lkIjowLCJkZXZpY2VfaWQiOiIyMTAyNDEyNDY1V0xNNDAwMDcxMCIsImV4dG1jIjoxNzAxMTkyMzcwLCJpcCI6IjEyMy42MC4yMjMuMjE5IiwicmVxdWVzdF9pZCI6IjFjYmNjMWM3LThkOGQtMTFlZS1iYWM2LWZhMTYzZTRiYmIwNyIsInN0IjowLCJ0cCI6MCwidXNlcl9pZCI6IjE4MTg0ODM1OTEyMDIzMTEyNzExNDcyNCIsInV0IjoiRU5URVJQUklTRSJ9.XEzQSaTiAdU29T0IMgInRVDTcN_8WBTFNBjgfntg5qE&device_id=2102412465WLM4000710&channel_id=0&stream_type=0",
				videoInfo: {
					liveUrl: "http://123.60.223.219:7083/live/live.m3u8?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhbSI6IkhPTE8iLCJjIjowLCJjaGFubmVsX2lkIjowLCJkZXZpY2VfaWQiOiIyMTAyNDEyNDY1V0xNNDAwMDcxMCIsImV4dG1jIjoxNzAxMTkyMzcwLCJpcCI6IjEyMy42MC4yMjMuMjE5IiwicmVxdWVzdF9pZCI6IjFjYmNjMWM3LThkOGQtMTFlZS1iYWM2LWZhMTYzZTRiYmIwNyIsInN0IjowLCJ0cCI6MCwidXNlcl9pZCI6IjE4MTg0ODM1OTEyMDIzMTEyNzExNDcyNCIsInV0IjoiRU5URVJQUklTRSJ9.XEzQSaTiAdU29T0IMgInRVDTcN_8WBTFNBjgfntg5qE&device_id=2102412465WLM4000710&channel_id=0&stream_type=0",
				},
				classChildList: []
			}

		},
		computed: {
			splitSt() {
				if (this.split == 1) {
					return 24
				} else if (this.split == 4) {
					return 12
				} else if (this.split == 9) {
					return 8
				} else if (this.split == 16) {
					return 6
				} else if (this.split == 36) {
					return 4
				} else {
					return 24
				}
			}
		},
		mounted() {
			this.getTree()
		},
		methods: {
			// 关闭视频
			onCloseVideo(item){
				item.liveUrl = false
				this.reVideoIndex()
			},
			// 全屏
			onFull(index) {
				this.$refs.video[index].player.fullScreen()
			},
			onVolume(index, v) {
				this.videoList[index].volume = v
				if (v == 0) {
					this.videoList[index].autoplayMuted = true
					this.$refs.video[index].player.muted = true
				} else {
					this.videoList[index].autoplayMuted = false
					this.$refs.video[index].player.muted = false
				}
				console.log(this.videoList[index])
			},
			// 懒加载树
			async loadNode(node, resolve) {

				if (node.level === 0) {
					return resolve([])
				} else {
					let sdata = {
						id: node.data.id,
						nodeType: node.data.nodeType
					}
					const res = await this.$API.api.cam.tree.post(sdata)
					let data = res.data
					if (resolve) {
						resolve(data)
						node.childNodes.forEach((item) => {
							if (item.data.loaded) {
								item.isLeaf = true
							}
						})
					}
					console.log(999, node)
				}
			},
			// 懒加载树
			// async loadNode(node, resolve) {

			// 	if (node.level === 0) {
			// 		return resolve([])
			// 	} else {
			// 		let sdata = {
			// 			id: node.data.id,
			// 			nodeType: node.data.nodeType
			// 		}
			// 		const res = await this.$API.api.cam.tree.post(sdata)
			// 		let data = res.data

			// 		if (resolve) {
			// 			resolve(data)
			// 			node.childNodes.forEach((item) => {
			// 				if (item.data.loaded) {
			// 					console.log(888, item)
			// 					item.isLeaf = true
			// 					if (item.data.children.length) {
			// 						item.childNodes.data = item.data.children
			// 						resolve(item.childNodes.data)
			// 						//resolve(item.data.children)
			// 					}
			// 				}
			// 			})

			// 		}
			// 	}
			// },
			// 回放
			onControlPalyback(index) {
				this.$refs.video[index].player.pause()
				this.dialog.palyback = true
				this.$nextTick(() => {
					this.$refs.palybackDialog.setData(this.videoInfo)
				})
			},
			// 云台控制
			onControlPTZ(index) {
				this.$refs.video[index].player.pause()
				this.dialog.PTZ = true
				this.$nextTick(() => {
					this.$refs.PTZDialog.setData(this.videoInfo)
				})
			},
			// 切屏
			changeSplit() {
				if (this.videoList.length <= this.split) {
					let end = this.split - this.videoList.length
					for (let i = 0; i < end; i++) {
						this.videoList.push({
							/* 添加列表的数据 */
						});
					}
				}
				this.reVideoIndex()
			},
			// 重置 当前索引
			reVideoIndex(){
				try {
				     this.videoList.forEach((item, index)=> {
				         console.log('item',item)
				         if (!item.liveUrl) {
							 this.videoIndex = index
				             throw new Error('LoopInterrupt');         //满足条件，跳出循环
				         }
				     })
				 } catch (e) {
				   if (e.message !== "LoopInterrupt") throw e
				}
			},
			//加载树数据
			async getTree() {
				this.menuloading = true
				const res = await this.$API.api.cam.tree.post(this.searchData);
				this.menuloading = false
				this.menuList = res.data
			},
			//树点击
			async menuClick(data) {
				console.log(44,data)
				if(data.nodeType == "store"){
					this.dialog.evaluate = true
					this.$nextTick(() => {
						this.$refs.evaluateDialog.setData(this.videoInfo)
					})
				}

				if (!data.device) {
					return false
				}

				this.videoList[this.videoIndex].liveUrl = ''
				this.videoList[this.videoIndex].title = data.title

				this.videoInfo = data
				if(this.split == 1){
					this.videoInfo.streamType = 'PRIMARY_STREAM'
				}
				this.playLive()

			},
			async playLive() {
				let sdata = {
					id: this.videoInfo.device,
					protocol: 'HTTP_FLV', //HTTP_HLS,HTTPS_HLS,HTTP_FLV,HTTPS_FLV
					channel: [this.videoInfo.channel],
					streamType: this.videoInfo.streamType || 'SECONDARY_STREAM_1' // 默认标清
				}
				const res = await this.$API.api.cam.live.post(sdata)
				let liveUrl = res.data[0].liveUrl
				// 如果只有一个视频
				if (this.split === 1) {
					this.videoList[0].liveUrl = liveUrl
				} else {
					// 如果有多个视频
					this.videoList[this.videoIndex].liveUrl = liveUrl
					if (this.videoIndex < this.split - 1) {
						// 当前视频不是最后一个，指向下一个视频
						this.videoIndex++;
					} else {
						// 当前视频已经是最后一个，插入最后一个视频
						this.videoIndex = this.split - 1;
					}
				}
				this.$refs.main.$el.scrollTop = 0
			}
		},
		onUnmounted() {
		  this.videoList.forEach((item, index) => {
		    if (item.liveUrl) {
		      this.$refs.video[index].player.destroy()
		    }
		  })
		}
	}
</script>

<style lang="scss">
	.jxx-video-box {
		position: relative;
	}

	.jxx-tool {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: rgba(0, 0, 0, .5);
		position: absolute;
		bottom: 0px;
		left: 0px;
		cursor: pointer;

		.jxx-tool-box {
			padding: 0 20px;
		}
	}

	.jxx-live-close {
		display:none;
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		width: 30px;
		height: 30px;
		border-radius: 100%;
		background: rgba(0, 0, 0, .5);
		box-shadow: 0 0 10px #000;
	}
	.jxx-video-box:hover .jxx-live-close{
		display: block;
	}
	.jxx-video-box-active{
		border:2px solid #f90 !important;
	}
</style>
